//   提供服用逻辑的函数
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

/**
 * 懒加载数据
 * @param {Object} target  DOM对象
 * @param {Function} apiFn Api函数
 */
export const useLazyData = (apiFn) => {
  const result = ref([])
  const target = ref(null)

  // stop 停止观察  isIntersecting 是否进入可视区Boolean
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        stop()
        // 调用API获取数据
        apiFn().then((data) => {
          result.value = data.result
        })
      }
    },
    //配置选项
    {
      threshold: 0 //进入可视区的比例
    }
  )
  return { result, target }
}
